<template>
  <div ref="myChart" id="myChart" :style="{ width: '100%', height: '400px' }"></div>
</template>

<script>
import { getCurrentInstance, onMounted, ref } from 'vue'

export default {
  setup() {
    // 通过 internalInstance.appContext.config.globalProperties 获取全局属性或方法
    let internalInstance = getCurrentInstance()
    let echarts = internalInstance.appContext.config.globalProperties.$echarts
    const data1 = ref([
      ['2021-01-04', 10],
      ['2021-01-05', 56],
      ['2021-01-06', 23],
      ['2021-01-07', 40],
      ['2021-01-08', 60],
      ['2021-01-09', 56],
      ['2021-01-10', 23]
    ])
    const data2 = ref([
      //   ['2021-01-04', 10],
      //   ['2021-01-05', 256],
      //   ['2021-01-06', 13],
      //   ['2021-01-07', 20],
      //   ['2021-01-08', 30],
      //   ['2021-01-09', 36],
      //   ['2021-01-10', 23]
      ['2021-01-04', 10],
      ['2021-01-05', 6],
      ['2021-01-06', 13],
      ['2021-01-07', 20],
      ['2021-01-08', 10],
      ['2021-01-09', 6],
      ['2021-01-10', 23]
    ])
    const data3 = ref([
      //   { value: 100, time: '2022-01-01' },
      //   { value: 200, time: '2022-01-02' },
      //   { value: 300, time: '2022-01-03' },
      //   { value: 300, time: '2022-01-04' }
      ['2021-01-04', 60],
      ['2021-01-05', 56],
      ['2021-01-06', 63],
      ['2021-01-07', 50],
      ['2021-01-08', 50],
      ['2021-01-09', 36],
      ['2021-01-10', 13]
    ])
    // 对数据的时间进行格式化
    // 计算数组中最大的值
    const calMax = arr => {
      let max = 0
      for (let i = 0; i < arr.length; i++) {
        if (arr[i][1] > max) {
          max = arr[i][1]
        }
      }
      let maxval = Math.ceil(max / 10) * 10
      return maxval
    }
    // console.log(calMax(data1.value))

    onMounted(() => {
      const dom = document.getElementById('myChart')
      const myChart = echarts.init(dom) // 初始化echarts实例
      //   const option = {
      //     xAxis: {
      //       type: 'category',
      //       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      //     },
      //     yAxis: {
      //       type: 'value'
      //     },
      //     series: [
      //       {
      //         data: [820, 932, 901, 934, 1290, 1330, 1320],
      //         type: 'line',
      //         smooth: true
      //       }
      //     ]
      //   }
      const option = {
        title: {
          text: '走势图'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {},
        // 工具栏
        toolbox: {
          show: true,
          feature: {
            // 区域缩放
            dataZoom: {
              yAxisIndex: 'none'
            },
            // 数据视图
            dataView: { readOnly: false },
            // 动态图表类型切换
            magicType: { type: ['line', 'bar'] },
            // 重置
            restore: {},
            // 导出图片
            saveAsImage: {}
          }
        },
        // xAxis: {
        //   type: 'category',
        //   boundaryGap: false,
        //   data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        // },
        xAxis: {
          type: 'time',
          //   刻度标签的相关设置
          axisLabel: {
            formatter: function (value, index) {
              console.log(value, index)
              return echarts.format.formatTime('yyyy-MM-dd', value)
            }
          }
          //   boundaryGap: false,
          //   data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        // 就一个Y轴时yAxis为对象
        // yAxis: {
        //   type: 'value',
        //   axisLabel: {
        //     formatter: '{value}'
        //   }
        // },
        // 两个Y轴时yAxis为数组
        yAxis: [
          {
            type: 'value',
            name: '用户',
            axisLabel: {
              formatter: '{value}'
            },
            min: 0,
            max:
              calMax(data1.value) > calMax(data3.value) ? calMax(data1.value) : calMax(data3.value),
            interval:
              (calMax(data1.value) > calMax(data3.value)
                ? calMax(data1.value)
                : calMax(data3.value)) / 5,
            splitNumber: 5
          },
          {
            type: 'value',
            name: '订单',
            axisLabel: {
              formatter: '{value}'
            },
            // 强制设置坐标轴的分割段数
            min: 0,
            max: calMax(data2.value),
            interval: calMax(data2.value) / 5,
            splitNumber: 5
          }
        ],
        series: [
          {
            name: '新注册用户',
            type: 'line',
            data: data1.value
            // markPoint: {
            //   data: [
            //     { type: 'max', name: 'Max' },
            //     { type: 'min', name: 'Min' }
            //   ]
            // },
            // markLine: {
            //   data: [{ type: 'average', name: 'Avg' }]
            // }
          },
          {
            // 使用右侧的Y轴
            yAxisIndex: 1,
            name: '新增订单',
            type: 'line',
            data: data2.value
          },
          {
            name: '新增管理员',
            type: 'line',
            data: data3.value
          }
        ]
      }
      // 设置实例参数
      myChart.setOption(option)
    })
    return {}
  }
}
</script>
